<template>
    <!-- 预约页面 -->
    <div class="app-container">
        <Add ref="addRef" :treeData="deptOptions" @updateList="getList"></Add>

        <div class="Information">
            <h3>用工详情</h3>
            <el-row>
                <el-form :model="form" :inline="true">
                    <el-col :span="5">
                        <el-form-item label="用工部门:">{{ form.deptName }} </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="岗位名称:">{{ form.postName }} </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="用工时长:">{{ form.workHours }}</el-form-item>
                    </el-col>

                    <el-col :span="3">
                        <el-form-item label="岗位薪酬:">{{ form.postComp }} </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="岗位需求人数:">{{ form.postReqCount }} </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="申请时间:">{{ form.applyTime }} </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="岗位描述:">{{ form.postDesc }} </el-form-item>
                    </el-col>
                </el-form>
                <div class='titleStatus'>
                    {{ form.applyStatus }}
                </div>
            </el-row>
            <div style="display: flex;justify-content: space-between;" v-if="form.applyStatus == '审核失败' ? true : false">
                <p style="color: #e9a14c;">审核失败原因：{{ form.applyCause }}</p>
                <el-button type="primary" size="mini" style="margin-bottom: 5px;" @click="handleUpdate(form)">修改</el-button>
            </div>
        </div>

        <div class="text-details" v-if="(form.applyStatus == '待审核' || form.applyStatus == '审核失败') ? false : true">
            <h3>学生申请详情</h3>
            <div class="apply">
                <p>审核人数：{{ form.wspDeptPostStuApply.applyCount }}</p>
                <p>已审核：{{ form.wspDeptPostStuApply.apprPendCount }}</p>
                <p>审核通过：{{ form.wspDeptPostStuApply.apprPassCount }}</p>
                <p>审核不通过：{{ form.wspDeptPostStuApply.apprNoCount }}</p>
            </div>
            <el-form :model="ruleForm" ref="ruleForm" :inline="true" class="demo-ruleForm">
                <el-form-item label="学院">
                    <el-cascader v-model="ruleForm.deptId" :options="deptOptions"
                        :props="{ value: 'id', currentLabels: 'label', checkStrictly: true }" @change="handleChange"
                        @keyup.enter.native="search"></el-cascader>
                </el-form-item>

                <el-form-item label="专业">
                    <el-select v-model="ruleForm.specialityName" clearable placeholder="请选择" @keyup.enter.native="search">
                        <el-option v-for="item in profession" :key="item.VALUE" :label="item.TITILE"
                            :value="item.TITILE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生姓名">
                    <el-input v-model="ruleForm.studentName" placeholder="请输入学生姓名"></el-input>
                </el-form-item>
                <el-form-item label="审核状态" prop="apprStatus">
                    <el-radio-group v-model="ruleForm.apprStatus">
                        <el-radio label="D">待审核</el-radio>
                        <el-radio label="Y">审核通过</el-radio>
                        <el-radio label="N">审核失败</el-radio>
                        <!-- <el-radio label="M">满员</el-radio> -->

                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <div style="float:right;">
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery" size="mini">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <el-table :data="TableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
                <!-- <el-table-column label="学号" prop="houseName" :show-overflow-tooltip="true" align="center" /> -->
                <el-table-column label="院系" prop="deptName" align="center" />
                <el-table-column label="专业" prop="specialityName" align="center" />
                <el-table-column label="学生姓名" prop="studentName" align="center" />
                <el-table-column label="审核状态" prop="apprStatus" align="center">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.wsp_appr_status" :value="scope.row.apprStatus"></dict-tag>
                    </template>
                </el-table-column>
                <el-table-column label="申请时间" prop="applyTime" align="center" />
            </el-table>
            

        </div>
        <pagination v-show="TableData.length > 0" :total="TableData.length" :page.sync="pageNum" :limit.sync="pageSize" />
        <div class="text-details" v-if="(form.applyStatus == '待审核' || form.applyStatus == '审核失败') ? true : false">
            <h3>学生申请详情</h3>
            <h3>暂无数据</h3>

        </div>

    </div>
</template>
    
<script>
import { deptTreeCollege } from "@/api/system/user";
import { getDicts } from "@/api/system/dict/type";
import Add from "@/views/worStudy/department/components/addDlg.vue"
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { detailsDeptpost } from '@/api/worStudy/department'
export default {
    name: "employmentDetails",
    dicts: ['psy_cons_req_type', 'wsp_appr_status'],
    components: {
        Add
    },
    data() {
        return {
            ruleForm: {
                deptId: '',
                apprStatus: undefined,
                studentName: '',
                specialityName: '',
            },
            pageNum: 1,
            pageSize: 10,
            form: {
                regCode: '',
                sex: '',
                mobile: '',
                studentName: ''
            },
            deptOptions: [],
            // filteredData: [],
            TableData: [],
            Userdata: [],
            profession: [],
            originalData: []
        }
    },
    created() {
        this.department()
        console.log(this.$route.query, '详情')
        detailsDeptpost(this.$route.query.wdpId).then(res => {
            if (res.code == 200) {

                this.form = res.data
                console.log(this.form, '获取详情')
                this.Userdata = res.data.wspDeptPostStuApply.wspPostEmpApplyRecordList
                this.TableData = res.data.wspDeptPostStuApply.wspPostEmpApplyRecordList
                getDicts("wsp_yonggong_status").then(res => {
                    res.data.forEach(e => {
                        if (this.form.applyStatus == e.dictValue) {
                            this.form.applyStatus = e.dictLabel
                        }
                    })
                });
            }
        })

        // this.filteredData = this.form.wspDeptPostStuApply.wspPostEmpApplyRecordList
        // this.originalData = this.filteredData



    },
    mounted() {

    },
    methods: {
        // 获取部门信息
        async department() {
            await deptTreeCollege().then(res => {
                this.deptOptions = res.data;
                console.log(1111, this.deptOptions)
            });
        },
        // 下拉树选择
        handleChange(value) {
            if (typeof value == "object") {
                this.ruleForm.deptId = value[value.length - 1];
                this.getSpeciality();
            } else if (typeof value == "number") {
                this.ruleForm.deptId = value;
                this.getSpeciality();
            } else if (value == undefined) {
                this.ruleForm.specialityId = "";
            }
        },

        getSpeciality() {
            if (this.ruleForm.deptId) {
                getSpecialityByDeptId({ deptId: this.ruleForm.deptId }).then(res => {
                    if (res.code == "200") {
                        this.profession = res.data;
                    } else {
                        console.log("123");
                        this.profession = [];
                    }
                });
            } else {
                this.profession = [];
            }
        },
        handleUpdate(rowdata) {
            console.log(rowdata, 'rowdata')
            this.$refs.addRef.open(rowdata, 'edit')
        },
        getList() {
            this.$router.push('/worStudy/worStudyDeptList')

        },
        //pageSize改变时触发的事件
        handleSizeChange(val) {
            this.ruleForm.pageNum = 1;
            this.ruleForm.pageSize = val;
        },
        //当前页码发生改变时触发的事件
        handleCurrentChange(val) {
            this.ruleForm.pageNum = val;
        },
        // 查询
        handleQuery() {
            // 这里是搜索框筛选判断，
            this.TableData = []
            console.log(this.TableData, this.Userdata, 'fdshj')
            this.Userdata.forEach((item, index) => {

                console.log(this.ruleForm, 'fdshj')
                if (this.ruleForm.deptId != '') {
                    if (this.ruleForm.deptId == item.deptId) {
                        this.TableData.push(this.Userdata[index])
                        if (this.ruleForm.specialityName != '') {
                            if (this.ruleForm.specialityName == item.specialityName) {
                                return
                            } else {
                                this.TableData = []
                                return
                            }
                        }
                        if (this.ruleForm.studentName != '') {
                            if (this.ruleForm.studentName == item.studentName) {
                                return
                            } else {
                                this.TableData = []
                                return
                            }
                        }
                        if (this.ruleForm.apprStatus != undefined) {
                            if (this.ruleForm.apprStatus == item.apprStatus) {
                                return
                            } else {
                                this.TableData = []
                                return
                            }
                        }
                    }
                } else if (this.ruleForm.specialityName != '') {
                    if (this.ruleForm.specialityName == item.specialityName) {
                        this.TableData.push(this.Userdata[index])
                        if (this.ruleForm.studentName != '') {
                            if (this.ruleForm.studentName == item.studentName) {
                                return
                            } else {
                                this.TableData = []
                                return
                            }
                        }
                        if (this.ruleForm.apprStatus != undefined) {
                            if (this.ruleForm.apprStatus == item.apprStatus) {
                                return
                            } else {
                                this.TableData = []
                                return
                            }
                        }
                    }
                } else if (this.ruleForm.studentName != '') {
                    console.log('eee')
                    if (this.ruleForm.studentName == item.studentName) {
                        this.TableData.push(this.Userdata[index])
                        console.log(this.TableData, 'this.TableDatathis.TableDatathis.TableData')
                        if (this.ruleForm.apprStatus != undefined) {
                            if (this.ruleForm.apprStatus == item.apprStatus) {
                                return
                            } else {
                                this.TableData = []
                                return
                            }
                        }
                        if (this.ruleForm.apprStatus != undefined) {
                            if (this.ruleForm.apprStatus == item.apprStatus) {
                                return
                            } else {
                                this.TableData = []
                                return
                            }
                        }
                    } else {
                        this.TableData = []
                        return
                    }

                } else if (this.ruleForm.apprStatus != undefined) {
                    if (this.ruleForm.apprStatus == item.apprStatus) {
                        this.TableData.push(this.Userdata[index])
                    }
                } else {
                    this.TableData = this.Userdata
                }
            })
            console.log(this.TableData, 'this.TableDatathis.TableDatathis.TableData')
        },
        resetQuery() {
            this.ruleForm = {}
            this.TableData = []
            this.TableData = this.Userdata

            console.log(this.TableData, 'this.form.wspDeptPostStuApply.wspPostEmpApplyRecordList')

        }
    }

};
</script>

<style scoped>
.Information {
    background-color: #EFEFEF;
    padding: 1% 2% 0 2%;
    margin-bottom: 2%;
}

.text-details {
    background-color: #EFEFEF;
    padding: 1% 2% 2% 2%;
    margin-bottom: 2%;
}

.apply {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    margin-bottom: 30px;
    border: 1px solid #c8c8c8;
}

.titleStatus {
    width: 100px;
    height: 100px;
    border: 5px solid #4095E5;
    border-radius: 50%;
    position: absolute;
    top: -22%;
    right: 0px;
    line-height: 100px;
    text-align: center;
    transform: rotate(-30deg);
}
</style>
